<template>
  <div>
    <el-form :model="form" :rules="rules" ref="form">
      <el-form-item label="教师工号" label-width="80px" prop="number">
        <el-input v-model="form.number" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="教师姓名" label-width="80px" prop="name">
        <el-input v-model="form.name" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="所属系" prop="departmentId" style="margin-left: 15px;">
        <el-select v-model="form.departmentId" placeholder="请选择系">
          <el-option v-for="item in list" :label="item.name" :value="item.id" :key="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="登录密码" label-width="80px" prop="password">
        <el-input v-model="form.password" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item style="display: flex; justify-content: flex-end">
        <el-button type="primary" @click="submit">确定</el-button>
        <el-button @click="qx">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { teacheradd } from '@/api/teacher';
import { teacherdepartment } from '@/api/teacher';
export default {
  data () {
    return {
      form: {
        id: -1,
        name: '',
        departmentId:"",
        password:"",
        number:""
        
      },
      list:[],
      rules: {
        number: [
          {
            required: true,
            message: '请输入教师工号(12位)',
            trigger: 'blur',
            min:12,
            max:12
          }
        ],
         departmentId: [
          {
            required: true,
            message: '请选择系',
            trigger: 'blur'
          }
        ],
        name: [
          {
            required: true,
            message: '请输入教师名称',
            trigger: 'blur'
          }
        ],
          password: [
          {
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          }
        ],
        
      }
    }
  },
  methods: {
    submit () {
    //   触发表单验证
      this.$refs['form'].validate(falg => {
        if (falg) {
          teacheradd(this.form).then(res => {
            console.log(res);
            if (res.code === 0) {
              this.$message({
                type: 'success',
                message: '添加成功'
              })
              // 通知父级关闭对话框
              this.$emit('close')
            }
          })
        }
      })
    
    },
    getlist(){
       teacherdepartment().then(res=>{
            this.list=res.data
        })
    },
    qx(){
       // 通知父级关闭对话框
    this.$emit('close')
    }
    
  },
  mounted(){
    this.getlist()
  }
}
</script>

<style lang="sass" scoped></style>
